<template>
  <div class="p-5-1">
    <BasicTable @register="registerTable" v-bind="$attrs">
      <!-- toolbar  tableTitle -->
      <template v-for="dynamicSlotName in dynamicSlotNameArr" #[dynamicSlotName]="{ text, index }">
        <slot :name="dynamicSlotName" :text="text" :index="index"></slot>
      </template>
      <template #tableTitle>
        <slot name="tableTitle"></slot>
      </template>
      <template #toolbar>
        <slot name="toolbar"></slot>
      </template>
      <template #action="{ record }">
        <slot name="tableAction" :record="record"></slot>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { toRefs, watch, withDefaults } from 'vue';
  import {
    BasicTable,
    ColumnChangeParam,
    useTable,
    // TableAction,
  } from '/@/components/Table';
  import { BasicColumn } from '/@/components/Table';

  const props = withDefaults(
    defineProps<{
      dynamicSlotNameArr?: string[] | undefined;
      columns: BasicColumn[]; //列描述数据对象
      dataSource: object[]; //表格数据
      total?: number|string; //总共有多少条数据
      // maxHeight?: number, //最大高度--可选
      compact?: boolean; //是否为紧凑型表单,默认为true
      current?: number; //当前页 --- 默认为1
      pageSize?: number; //当前页面条数 默认为10
      moreObj?: any; //保留可扩展性,可以新增其它的配置
    }>(),
    {
      // maxHeight: 450,//最大高度--可选
      total: 0, //默认为0
      compact: true, //是否为紧凑型表单,默认为true
      current: 1, //当前页 --- 默认为1
      pageSize: 10, //当前页面条数 默认为10
      moreObj: {},
    },
  );

  const emits = defineEmits(['onChange']);

  // const { maxHeight } = props;
  const { columns, dataSource, total, current, moreObj } = toRefs(props);
  const onChange = (...args: any[]) => {
    console.log('onChange', args);
    emits('onChange', ...args);
  };
  const [
    registerTable,
    {
      setPagination, //设置页码
      setLoading, //设置是否显示loadding  设置true为显示,false为不显示
      setColumns, //设置表头数据
      getColumns, //获取表格数据
      getDataSource, //获取表格数据
      getPaginationRef, //获取当前分页信息
      getSelectRows, // 获取选中行的 rows
      getSelectRowKeys, //获取选中行的 keys
      setSelectedRowKeys, //设置选中行
      clearSelectedRowKeys, // 清空选中行
    },
  ] = useTable(
    {
      canResize: false,
      dataSource,
      columns: columns.value,
      // maxHeight,
      // rowKey: "id",  // 可编辑行加rowkey会出现递归循环，导致dom渲染过慢
      size: 'small',
      striped: false, //是否需要斑马纹
      showTableSetting: true, //是否展未表格右上角的设置/刷新/最大化按钮
      tableSetting: {
        redo: false, // 是否显示刷新按钮
        size: false, // 是否显示字段调整按钮
      },
      pagination: {
        //分页设置
        current: 1,
        pageSize: 10,
        total: Number(total.value),
      },
      actionColumn: {
        //操作按钮区域
        width: 150,
        title: '操作',
        align: 'center',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },

      onChange,
      onColumnsChange: (data: ColumnChangeParam[]) => {
        console.log('ColumnsChanged', data);
      },
      ...moreObj.value,
    },
  )
  watch(total, (newValue: number) => {
    //为了方便使用,在这里监听整体页码,传了参数后自动设置页码
    setPagination({
      total: Number(newValue),
    });
  });

  watch(current, (newValue: number) => {
    //为了方便使用,在这里监听整体页码,传了参数后自动设置页码
    setPagination({
      current: newValue,
    });
  });

  defineExpose({
    setPagination, //设置页码
    setLoading, //设置是否显示loadding  设置true为显示,false为不显示
    setColumns, //设置表头数据
    getColumns, //获取表格数据
    getDataSource, //获取表格数据
    getPaginationRef, //获取当前分页信息
    getSelectRows, // 获取选中行的 rows
    getSelectRowKeys, //获取选中行的 keys
    setSelectedRowKeys, //设置选中行
    clearSelectedRowKeys, // 清空选中行
  });
</script>
<style lang="less">
  .p-5-1 {
    padding: 0.1rem 1.05rem;
  }

  .ant-dropdown-menu-title-content {
    color: @primary-color;

    .ml-1 {
      color: rgba(0, 0, 0, 0.85);
    }
  }

  .ant-dropdown-menu-item > .anticon:first-child,
  .ant-dropdown-menu-submenu-title > .anticon:first-child,
  .ant-dropdown-menu-item > span > .anticon:first-child,
  .ant-dropdown-menu-submenu-title > span > .anticon:first-child {
    margin: 0;
  }
</style>
